import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PAGE_ELEMENTS, SUPPORTED_PLATFORMS } from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class GoogleShortVideoPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleShortVideoPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleShortVideoPage {
    if (!GoogleShortVideoPage.instance) {
      GoogleShortVideoPage.instance = new GoogleShortVideoPage()
    }
    return GoogleShortVideoPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  baseStyles(): string {
    return `
    ${this.searchCommonStyles.resultItemStyles({ overflowHide: false, setPadding: false, noMarginBottom: true })}
    border-radius: 16px !important;
    padding-bottom: 5px !important;
    
    span {
      color: var(${this.themeVarService.search.default.text}) !important;
    }
    
    a {
      &:hover {
        [role="heading"] {
          text-decoration: none !important;
          
          > span {
            color: var(${this.themeVarService.link.default.textHover}) !important;
          }
        }
      }

      [role="heading"] > span {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
    }
    `
  }

  getMainStyles(): string {
    return `
    #main {
      #rcnt {
        > div {
          display: block !important;
          margin: 0 !important;
        }

        #search {
          /* 搜索结果列表一 */
          #rso > div {
            gap: ${this.themeVarService.search.resultItem.gap} !important;
            background-color: transparent !important;
            
            /* 结果项 */
            > div {
              ${this.baseStyles()}
            }
          }
        }
        
        #botstuff {
          div[data-async-context] {
            > div {
              background-color: transparent !important;
              
              &[role="heading"] > div {
                ${this.baseStyles()}
              }
            }
          }
          
          /* 更多结果 */
          a[role=button][data-ve-view] {
            hr {
              background-color: transparent !important;
            }
          }
        }
      }
    }
    `
  }
}
